<!--  -->
<template>
  <div class="el-card__body">
    <form class="el-form">
      <div v-for="item in order" class="el-form-item" :key="item.id">
        <label
          for="flashOrderOvertime"
          class="el-form-item__label"
          style="width: 150px;"
        >{{item.or}}：</label>
        <div class="el-form-item__content" style="margin-left: 150px;">
          <div data-v-49676084 class="input-width el-input el-input-group el-input-group--append">
            <!---->
            <input type="text" class="el-input__inner" />
            <div class="el-input-group__append">{{item.time}}</div>
            <span data-v-49676084 class="note-margin">{{item.pj}}</span>
          </div>
        </div>
      </div>
      <button class="btn">提交</button>
    </form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      order: [
        { id: 1, or: "秒杀订单", time: "分", pj: "未付款，订单自动关闭" },
        { id: 2, or: "正常订单", time: "分", pj: "未付款，订单自动关闭" },
        { id: 3, or: "发货超过", time: "天", pj: "未收货，订单自动完成" },
        {
          id: 4,
          or: "订单完成超过",
          time: "天",
          pj: "自动结束交易，不能申请售后",
        },
        { id: 5, or: "订单完成超过", time: "天", pj: "自动五星好评" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
* {
  margin: 0;
  padding: 0;
}
.el-card__body {
  margin: 10px auto;
  width: 800px;
  height: 500px;
  border: 1px solid #ececec;
}
.el-form {
  width: 728px;
  height: 420px;
  padding: 20px;
  margin: 0 auto;
}
.el-form-item {
  padding: 20px;
}
.el-input__inner {
  display: block;
  width: 214px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  float: left;
  border-right: none;
}
.el-input-group__append {
  width: 55px;
  height: 40px;
  line-height: 40px;
  background-color: #f5f7fa;
  color: #909399;
  display: table-cell;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  float: left;
}
.note-margin {
  line-height: 40px;
  margin-left: 20px;
}
.btn{
    width: 70px;
    height: 40px;
    color: #fff;
    background-color: #409eff;
    margin-left: 200px;
}
</style>